<template>
	<view class="emoji" :style="{height:height + 'px'}"> 
		<view class="emoji-line" v-for="(line,i) in emoji" :key="i">
			<view class="emoji-line-item" v-for="(item,index) in line" :key="index" @tap="clickEmoji(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			height:{
				type: Number,
				default: 100
			}
		},
		data() {
			return {
				emoji: [
				  ['😀','😃','😄','😁','😆','😅','😂','🙂'],
				  ['😉','😊','😇','😍','🤩','😘','😗','😛'],
				  ['😜','🤪','😝','🤑','🤗','🤭','🤫','🤔'],
				  ['🤐','🤨','😐','😑','😶','😏','😒','🙄'],
				  ['😬','🤥','😌','😔','😪','😪','😴','😷'],
				  ['🤒','🤕','🤢','🤮','🤧','😵','🤯','🤠'],
				  ['😎','🤓','🧐','😕','😟','🙁','️😮','😯'],
				  ['😲','😳','😦','😧','😨','😰','😥','😢'],
				  ['😭','😱','😖','😣','😞','😓','😩','😫'],
				  ['😤','😡','😠','🤬','😈','💀','☠','️🤡'],
				  ['👹','👺','👻','👽','🙈','🙉','🙊','💋'],
				  ['💌','💘','💝','💖','💗','💓','💞','💕']
				
				]
			}
		},
		methods: {
			clickEmoji:function(e){
				// 传递表情，到上级页面
				this.$emit('clickEmoji',e)
			}
		}
	}
</script>

<style lang="scss">
	.emoji{
		width: 100%;
		padding: 16rpx 10rpx 120px 10rpx;
		box-sizing: border-box;
		overflow-y: auto;
		.emoji-line{
			display: flex;
			padding: 10rpx;
			.emoji-line-item{
				flex: 1;
				text-align: center;
				font-size: 45rpx;
			}
			
		}
	}
	
	
</style>
